<template>
  <view class="leveCenter">
    <view class="leve-header">
      <view class="flex flex-align flex-center">
        <view class="leve-header-left">
          <view class="day">21天</view>
          <view class="wenzi">距下次刷新</view>
        </view>
        <view class="headerImg">
          <image src="@/static/logo.png" mode=""></image>
        </view>
        <view class="leve-header-left">
          <view class="day">999</view>
          <view class="wenzi">当前成长值</view>
        </view>
      </view>
      <view class="leve-img">
        <image src="@/static/levelcenter/level05.png" mode="scaleToFill" />
      </view>
    </view>
    <view class="level-swiper">
      <swiper class="swiper" previous-margin="30rpx" next-margin="10rpx">
        <swiper-item>
          <view class="swiper-item">
            <image src="@/static/levelcenter/level07.png" class="swiper-item-bg" mode="scaleToFill" />
            <view class="level-main">
              <view class="level-top">  当前等级 </view>
              <image class="level-img" src="@/static/levelcenter/level06.png" mode="scaleToFill" />
              <view class="level-quanyi">暂无会员权益</view>
              <view class="level-bottom">
                <!-- <view class="level-bottom-jibie">  您的当前等级已高于该等级 </view> -->
                <view class="level-bottom-jibie flex flex-align flex-bt">  
                  <view>再消费20元可升至V1</view>
                  <view>180/200</view>  
                </view>
                <view class="level-bottom-jindu">
                  <view class="level-bottom-jindu-bg">
                    <view class="level-bottom-jindu-bg1"></view>
                  </view>
                </view>
              </view>
            </view>
            
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image src="@/static/levelcenter/level09.png" class="swiper-item-bg" mode="scaleToFill" />
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image src="@/static/levelcenter/level11.png" class="swiper-item-bg" mode="scaleToFill" />
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="level-fuli">
      <view class="level-fuli-list">
        <view class="level-fuli-bg flex flee-align">
          <image src="@/static/levelcenter/level04.png" mode="scaleToFill" />
          <view class="name">
            <view class="title">专属兑换商品</view>
            <view class="content">在兑换专区中，您可以兑换V3及以下所有的</view>
          </view>
        </view>
      </view>
      <view class="level-fuli-list">
        <view class="level-fuli-bg flex flee-align">
          <image src="@/static/levelcenter/level03.png" mode="scaleToFill" />
          <view class="name">
            <view class="title">更多签到福利</view>
            <view class="content">您每日完成观看直播的签到任务后，即可获赠签到奖励，奖励包含：10礼品卡、10增寿豆、0.5元微信红包打款</view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 180rpx;"></view>
    <view class="level-footer">
      <view class="flex flex-align flex-cneter">
        <view class="bg-hei"></view>
      </view>
      <view class="header flex flex-align flex-center" @click="openJiebie">
        <view class="homeTitle"><text>会员介绍</text></view>
      </view>
    </view>
    <leveJibie ref="leveJibieRef"></leveJibie>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue'
import leveJibie from './components/leveJibie.vue'
const leveJibieRef = ref(null)
const openJiebie = async ()=>{
  leveJibieRef.value?.open()
}
</script>

<style scoped lang="scss">
.leveCenter{background: url('@/static/levelcenter/level01.png') no-repeat;background-size: 100% 100%;height: 100vh;overflow-y: auto;}
.leve-header{
  width: 100%;text-align:center;padding: 60rpx 0 40rpx;
  .leve-header-left{margin: 0 30rpx;
    .day{color: #fff;font-size: 32rpx;}
   .wenzi{color: #8A8C8F;font-size: 24rpx;}
  }
  .headerImg{ 
    image{
      width: 164rpx;height: 164rpx;border-radius: 100%;border: 2px solid #817B79;

    }
 }
 .leve-img{
  image{width: 100%;height: 104rpx;}
 }
}
.level-swiper{
  .swiper{
    width:100%;height:368rpx;
  }
  .swiper-item{position: relative;box-sizing: border-box;height: 100%;
    image.swiper-item-bg{width:100%;height: 368rpx;position: absolute;z-index: 0;top: 0;left: 0;}
    .level-top{position: absolute;top: 28rpx;left: 2rpx;background:linear-gradient(to right,#D4D4D4,#9B9B9B);color: #fff;padding: 4rpx 18rpx;font-size: 20rpx;border-radius: 60rpx 0 60rpx 0;}
    .level-main{position: relative;z-index: 111;height: 100%;left: 0;padding: 70rpx 0 0 30rpx;box-sizing: border-box;}
    .level-img{width: 248rpx;height: 72rpx;}
    .level-quanyi{font-size: 24rpx;color: #969799;}
    .level-bottom{position: absolute;bottom: 40rpx;left:30rpx;width:620rpx;
      .level-bottom-jindu-bg{background: #fff;height: 12rpx;border-radius: 12rpx;width: 620rpx;margin-top: 20rpx;}
      .level-bottom-jindu-bg1{background: linear-gradient(to right,#D4D4D4,#9B9B9B);border-radius: 12rpx;width: 300rpx;height: 12rpx;}
    }
    .level-bottom-jibie{font-size: 24rpx;color: #969799;}
  }
}
.level-fuli{
  padding: 0 30rpx;box-sizing: border-box;margin:60rpx 0rpx 30rpx;
  .level-fuli-list{background: linear-gradient(145deg, #C9A38C 0%, #252322 50%, #C9A38C 100%);padding:1px;
    .level-fuli-bg{
      background: #252322;padding: 30rpx;border-radius: 20rpx;
    }

    border-radius: 20rpx;margin-bottom: 20rpx;
    /* 定义渐变背景 */
    
    image{width:88rpx;height: 88rpx;margin-right: 10rpx;}
    .name{padding-top:4rpx ;width: 520rpx;
     .title{
      font-size: 28rpx;margin-bottom: 10rpx;
      background: linear-gradient(to right, #FAC686, #C9A38C);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
     }
     .content{font-size: 24rpx;color: #DFE0E1;}
   }
  }

}
.level-footer{background: #fff;border-radius: 40rpx 40rpx 0 0;position: fixed;bottom: 0;left: 0;width: 100%;padding: 30rpx 0 50rpx;
  .bg-hei{width: 56rpx;height: 8rpx;border-radius: 8rpx;background: #323233;margin: 0 auto;}
}
</style>